<template>
    <div>
        <h2>{{ info.name }}</h2>
        <h2>{{ info.age }}</h2>
        <!-- 向子组件传入info属性 -->
        <Home :info="info" :readonly-info="readonlyInfo"></Home>
    </div>
</template>

<script>
import Home from './Home.vue'
import { reactive, readonly } from 'vue'
export default {
    components: { Home },
    setup() {
        // 没有readonly传递给其他组件的数据会被允许修改
        const info = reactive({
            name: "wtf",
            age: 18
        })
        // readonly传递给其他组件的数据不被允许修改
        const info2 = reactive({
            name: "wtf1",
            age: 20
        })
        const readonlyInfo = readonly(info2)
        return {
            info,
            readonlyInfo
        }
    }
}
</script>

<style lang="scss" scoped>
</style>